<template>
  <div class="app-container">
    <div class="form-container" ref="formRef">
      <div id="printBox">
        <header class="form-header">
          <!-- <h1>附件</h1> -->
          <h2>2025年上海市崇明区城桥中学招收艺体特长生报名信息表</h2>
          <div class="school-info">
            <span>
              {{ formData.district }}
            </span>
            区 <span>{{ formData.school }}</span> 学校
          </div>
          <p style="text-align: left">本人承诺，以上填报信息均属实。</p>
        </header>

        <div class="form-body">
          <table class="registration-table">
            <tr>
              <td width="100">学生姓名</td>
              <td width="150">
                {{ formData.actualName }}
              </td>
              <td width="130">中考报名号</td>
              <td width="200">
                {{ formData.registerNum }}
              </td>
              <td rowspan="4" width="120" class="photo-cell">
                <div class="photo-container">
                  <img :src="stuInfo.picUrl" alt="照片预览" class="photo-preview" />
                </div>
              </td>
            </tr>
            <tr>
              <td>性别</td>
              <td>
                {{ stuInfo.gender == 1 ? '男' : '女' }}
              </td>
              <td>身份证号</td>
              <td>
                {{ stuInfo.card }}
              </td>
            </tr>
            <tr>
              <td>班级职务</td>
              <td>
                {{ stuInfo.position }}
              </td>
              <td>户籍地址</td>
              <td>
                {{ stuInfo.houseLocation }}
              </td>
            </tr>
            <tr>
              <td>政治面貌</td>
              <td>
                {{ stuInfo.political }}
              </td>
              <td>居住地址</td>
              <td>
                {{ stuInfo.address }}
              </td>
            </tr>
            <tr>
              <td>监护人称谓</td>
              <td>姓名</td>
              <td>联系电话</td>
              <td colspan="2">工作单位</td>
            </tr>
            <tr>
              <td>
                <input v-model="formData.guardianTitle" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.guardianName" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.phone" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <input v-model="formData.workplace" type="text" placeholder="" />
              </td>
            </tr>
            <tr>
              <td>
                <input v-model="formData.guardianTitle2" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.guardianName2" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.phone2" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <input v-model="formData.workplace2" type="text" placeholder="" />
              </td>
            </tr>
            <!-- <tr>
              <td rowspan="2">自我介绍</td>
              <td colspan="4" class="self-intro-cell">
                <textarea v-model="formData.remark" placeholder="(300字以内)" maxlength="300" rows="8"></textarea>
                <div class="word-count">{{ formData.selfIntroduction.length }}/300</div>
              </td>
            </tr> -->
            <tr>
              <td rowspan="2">本学年一模考试成绩</td>
              <td colspan="4">
                <div class="signature-line">
                  <div>
                    <span>语文：</span>
                    <span class="signature-input" style="width: 85px">
                      <!-- <input v-model="formData.language" min="0" max="100" type="number"  /> -->
                      <a-input-number v-model:value="formData.language" :min="0" :max="100" placeholder="语文成绩" />
                    </span>

                    <span style="width: 85px; margin-left: 20px">数学：</span>
                    <span class="signature-input">
                      <a-input-number v-model:value="formData.maths" :min="0" :max="100" placeholder="数学成绩" />
                    </span>
                    <span style="width: 85px; margin-left: 20px">英语：</span>
                    <span class="signature-input">
                      <a-input-number v-model:value="formData.english" :min="0" :max="100" placeholder="英语成绩" />
                    </span>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <!-- <td colspan="4"></td> -->
            </tr>
            <tr>
              <td rowspan="3" style="text-align: center">特长情况</td>
              <!-- <td colspan="4" style="text-align: center; font-weight: bold">请选择以下1项特长参与资格审核（校测）</td> -->
            </tr>
            <tr>
              <td colspan="2" style="text-align: center">体育类</td>
              <td colspan="2" style="text-align: center">艺术类</td>
            </tr>
            <tr>
              <td colspan="2">
                <div style="display: flex">
                  <!-- <div style="display: flex; margin-right: 20px">
                    <input class="checkboxs" type="checkbox" v-model="formData.checkbox1"
                      @change="changeForte('田径')" />田径
                  </div>
                  <div style="display: flex; margin-right: 20px">
                    <input class="checkboxs" type="checkbox" v-model="formData.checkbox2"
                      @change="changeForte('乒乓')" />乒乓
                  </div>
                  <div style="display: flex; margin-right: 20px">
                    <input class="checkboxs" type="checkbox" v-model="formData.checkbox3"
                      @change="changeForte('羽毛球')" />羽毛球
                  </div> -->
                  <a-radio-group v-model:value="formData.subcategories" @change="changeForte()">
                    <a-radio value="田径">田径</a-radio>
                    <a-radio value="乒乓">乒乓</a-radio>
                    <a-radio value="羽毛球">羽毛球</a-radio>
                    <a-radio value="足球">足球</a-radio>
                    <a-radio value="篮球">篮球</a-radio>
                    <a-radio value="其他">
                      其他
                      <a-input v-model:value="formData.other" v-if="formData.subcategories === '其他'" @blur="myBlur()" />
                    </a-radio>
                  </a-radio-group>
                </div>
              </td>
              <td colspan="2">
                <a-radio-group v-model:value="formData.subcategories" @change="changeForte()">
                  <a-radio value="绘画">绘画</a-radio>
                  <a-radio value="书法">书法</a-radio>
                  <a-radio value="音乐">音乐（含声乐、器乐、舞蹈）</a-radio>
                </a-radio-group>
              </td>
            </tr>
            <!-- <tr>
              <td style="text-align: center">特长佐证材料</td>
              <td colspan="4" style="text-align: center">
                （对应选择的1项特长填报相应佐证材料。证明材料可包括个人相关艺体类等级证书或初中阶段获得的奖状、比赛成绩证明等。填报个人最高级别奖项，上限5项）
                <div class="photo-container">
                  <div v-for="(img, k) in fileUrl1" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>

                  <div v-if="fileUrl1.length < 5" class="photo-placeholder">上传图片或者文件</div>

                  <input v-if="fileUrl1.length < 5" type="file" @change="handlePhotoUpload1" accept="image/*" class="photo-input" multiple />

                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr> -->

            <tr>
              <td rowspan="7" style="text-align: center">特长佐证材料</td>
              <td colspan="7" style="text-align: center; font-weight: bold">
                （对应选择的1项特长填报相应佐证材料。证明材料可包括个人相关艺体类等级证书或初中阶段获得的奖状、比赛成绩证明等。填报个人最高级别奖项，上限5项）
              </td>
            </tr>

            <tr>
              <td style="text-align: center">成绩或证书获取时间</td>
              <td style="text-align: center">成绩或证书名称</td>
              <td style="text-align: center">成绩或证书名次或等级</td>
              <td style="text-align: center" colspan="3">材料附件</td>
            </tr>
            <tr>
              <td>
                <a-date-picker :disabled-date="disabledDate" :valueFormat="'YYYY-MM-DD'" v-model:value="formData.issuanceDate4" />
              </td>
              <td>
                <input v-model="formData.awardName4" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade4" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <!-- <input v-model="formData.certificateUrl" type="text" placeholder="" /> -->
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl24" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>

                  <!-- 显示上传占位符 -->
                  <div v-if="fileUrl24.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>

                  <!-- 文件选择框 -->
                  <input v-if="fileUrl24.length < 1" type="file" @change="handlePhotoUpload24" accept="image/*" class="photo-input" multiple />

                  <!-- 图片预览模态框 -->
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a-date-picker :disabled-date="disabledDate" v-model:value="formData.issuanceDate5" :valueFormat="'YYYY-MM-DD'" />
              </td>
              <td>
                <input v-model="formData.awardName5" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade5" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl25" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>
                  <div v-if="fileUrl25.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>
                  <input v-if="fileUrl25.length < 1" type="file" @change="handlePhotoUpload25" accept="image/*" class="photo-input" multiple />
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a-date-picker :disabled-date="disabledDate" v-model:value="formData.issuanceDate6" :valueFormat="'YYYY-MM-DD'" />
              </td>
              <td>
                <input v-model="formData.awardName6" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade6" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <!-- <input v-model="formData.certificateUrl3" type="text" placeholder="" /> -->
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl26" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>

                  <!-- 显示上传占位符 -->
                  <div v-if="fileUrl26.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>

                  <!-- 文件选择框 -->
                  <input v-if="fileUrl26.length < 1" type="file" @change="handlePhotoUpload26" accept="image/*" class="photo-input" multiple />

                  <!-- 图片预览模态框 -->
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a-date-picker :disabled-date="disabledDate" v-model:value="formData.issuanceDate7" :valueFormat="'YYYY-MM-DD'" />
              </td>
              <td>
                <input v-model="formData.awardName7" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade7" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <!-- <input v-model="formData.certificateUrl3" type="text" placeholder="" /> -->
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl27" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>

                  <!-- 显示上传占位符 -->
                  <div v-if="fileUrl27.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>

                  <!-- 文件选择框 -->
                  <input v-if="fileUrl27.length < 1" type="file" @change="handlePhotoUpload27" accept="image/*" class="photo-input" multiple />

                  <!-- 图片预览模态框 -->
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a-date-picker :disabled-date="disabledDate" v-model:value="formData.issuanceDate8" :valueFormat="'YYYY-MM-DD'" />
              </td>
              <td>
                <input v-model="formData.awardName8" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade8" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <!-- <input v-model="formData.certificateUrl3" type="text" placeholder="" /> -->
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl28" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>

                  <!-- 显示上传占位符 -->
                  <div v-if="fileUrl28.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>

                  <!-- 文件选择框 -->
                  <input v-if="fileUrl28.length < 1" type="file" @change="handlePhotoUpload28" accept="image/*" class="photo-input" multiple />

                  <!-- 图片预览模态框 -->
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>

            <tr>
              <td rowspan="5" style="text-align: center">其他获奖及荣誉</td>
              <td colspan="5" style="text-align: center; font-weight: bold">
                （除以上特长佐证材料外，填报并上传初中阶段获得的其他奖项及荣誉，须有相关证书证明。填报个人最高级别奖项，上限3项）
              </td>
            </tr>

            <tr>
              <td style="text-align: center">获奖时间</td>
              <td style="text-align: center">奖项名称</td>
              <td style="text-align: center">成绩或证书等级</td>
              <td style="text-align: center" colspan="3">材料附件</td>
            </tr>
            <tr>
              <td>
                <a-date-picker :disabled-date="disabledDate" :valueFormat="'YYYY-MM-DD'" v-model:value="formData.issuanceDate" />
              </td>
               <td>
                <input v-model="formData.awardName" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <!-- <input v-model="formData.certificateUrl" type="text" placeholder="" /> -->
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl21" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>

                  <!-- 显示上传占位符 -->
                  <div v-if="fileUrl21.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>

                  <!-- 文件选择框 -->
                  <input v-if="fileUrl21.length < 1" type="file" @change="handlePhotoUpload21" accept="image/*" class="photo-input" multiple />

                  <!-- 图片预览模态框 -->
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a-date-picker :disabled-date="disabledDate" v-model:value="formData.issuanceDate2" :valueFormat="'YYYY-MM-DD'" />
              </td>
                <td>
                <input v-model="formData.awardName2" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade2" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl22" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>
                  <div v-if="fileUrl22.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>
                  <input v-if="fileUrl22.length < 1" type="file" @change="handlePhotoUpload22" accept="image/*" class="photo-input" multiple />
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <a-date-picker v-model:value="formData.issuanceDate3" :valueFormat="'YYYY-MM-DD'" />
              </td>
               <td>
                <input v-model="formData.awardName3" type="text" placeholder="" />
              </td>
              <td>
                <input v-model="formData.grade3" type="text" placeholder="" />
              </td>
              <td colspan="2">
                <!-- <input v-model="formData.certificateUrl3" type="text" placeholder="" /> -->
                <div class="photo-container2">
                  <div v-for="(img, k) in fileUrl23" :key="k" class="photo-preview-container">
                    <img v-if="img" :src="img" :alt="'照片预览-' + k" class="photo-preview" style="width: 100px" @click.stop="previewImage(img)" />
                  </div>

                  <!-- 显示上传占位符 -->
                  <div v-if="fileUrl23.length < 1" class="photo-placeholder" style="margin-left: 0">上传图片</div>

                  <!-- 文件选择框 -->
                  <input v-if="fileUrl23.length < 1" type="file" @change="handlePhotoUpload23" accept="image/*" class="photo-input" multiple />

                  <!-- 图片预览模态框 -->
                  <div v-if="showPreview" class="image-preview-modal" @click="closePreview">
                    <img :src="previewImageSrc" alt="图片预览" class="preview-modal-image" />
                  </div>
                </div>
              </td>
            </tr>

            <tr>
              <!-- <td colspan="4"></td> -->
            </tr>
            <!-- <tr>
              <td rowspan="2">报考承诺</td>
              <td colspan="4" class="declaration-cell">

                <div class="signature-line">
                  <div>
                    <span>学生签字：</span>
                    <span class="signature-input">
                    
                    </span>

                    <span style="margin-left: 100px;">监护人签字：</span>
                    <span class="signature-input">
                    
                    </span>
                  </div>
                
                </div>
                <div class="date-line">
                  <span>{{ formData.signatureYear }}</span> 年
                  <span>{{ formData.signatureMonth }}</span> 月
                  <span>{{ formData.signatureDay }}</span> 日
                </div>
              </td>
            </tr>
            <tr>
            </tr>
            <tr>
              <td rowspan="2">学校审核</td>
              <td colspan="4" class="school-review-cell">
                <p>初中学校审核意见：</p>
                <div class="school-seal">
                  学校盖章
                  <div class="date-line school-date">
                    <span>{{ formData.schoolYear }}</span> 年
                    <span>{{ formData.schoolMonth }}</span> 月
                    <span>{{ formData.schoolDay }}</span> 日
                  </div>
                </div>
              </td>
            </tr>
            <tr>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="4" class="note-cell">
                <p>填报完成后，此表由学生本人及监护人签字确认，并由初中学校审核盖章，入围校测的学生于校测当日交至招生学校。</p>
              </td>
            </tr> -->
          </table>
        </div>
      </div>

      <div class="form-container" ref="formRefpdf2" id="formRefpdf2" v-if="diaType" style="width: 1300px; font-size: 17px">
        <header class="form-header">
          <!-- <h1>附件</h1> -->
          <h2>2025年上海市崇明区城桥中学招收艺体特长生报名信息表</h2>
          <div class="school-info" style="font-weight: bold; font-size: 22px">
            <span>{{ formData.district }}</span
            >区 <span>{{ formData.school }}</span> 学校
          </div>
          <p style="text-align: left">本人承诺，以上填报信息均属实。</p>
        </header>
        <div class="form-body">
          <table class="registration-table">
            <tr>
              <td width="100">学生姓名</td>
              <td width="150">
                {{ formData.actualName }}
              </td>
              <td width="130">中考报名号</td>
              <td width="200">
                {{ formData.registerNum }}
              </td>
              <td rowspan="4" width="120" class="photo-cell">
                <div class="photo-container">
                  <img :src="photoUrl" alt="照片预览" class="photo-preview" />
                </div>
              </td>
            </tr>
            <tr>
              <td>性别</td>
              <td>
                {{ formData.gender == 1 ? '男' : '女' }}
              </td>
              <td>身份证号</td>
              <td>
                {{ formData.card }}
              </td>
            </tr>
            <tr>
              <td>班级职务</td>
              <td>
                {{ formData.position }}
              </td>
              <td>户籍地址</td>
              <td>
                {{ formData.houseLocation }}
              </td>
            </tr>
            <tr>
              <td>政治面貌</td>
              <td>
                {{ formData.political }}
              </td>
              <td>居住地址</td>
              <td>
                {{ formData.address }}
              </td>
            </tr>
            <tr>
              <td>监护人称谓</td>
              <td>姓名</td>
              <td>联系电话</td>
              <td colspan="2">工作单位</td>
            </tr>
            <tr>
              <td>
                {{ formData.guardianTitle }}
              </td>
              <td>
                {{ formData.guardianName }}
              </td>
              <td>
                {{ formData.phone }}
              </td>
              <td colspan="2">
                {{ formData.workplace }}
              </td>
            </tr>
            <tr>
              <td>
                {{ formData.guardianTitle2 }}
              </td>
              <td>
                {{ formData.guardianName2 }}
              </td>
              <td>
                {{ formData.phone2 }}
              </td>
              <td colspan="2">
                {{ formData.workplace2 }}
              </td>
            </tr>

            <tr>
              <td rowspan="2">本学年一模考试成绩</td>
              <td colspan="4">
                <div class="signature-line">
                  <div>
                    <span>语文：</span>
                    <span class="signature-input" style="width: 40px">
                      {{ formData.language }}
                      <!-- <input v-model="formData.language" type="number" placeholder="语文成绩" /> -->
                    </span>

                    <span style="margin-left: 100px">数学：</span>
                    <span class="signature-input" style="width: 40px">
                      {{ formData.maths }}
                      <!-- <input v-model="formData.maths" type="number" placeholder="数学成绩" /> -->
                    </span>
                    <span style="margin-left: 100px">英语：</span>
                    <span class="signature-input" style="width: 40px">
                      {{ formData.english }}
                      <!-- <input v-model="formData.english" type="number" placeholder="英语成绩" /> -->
                    </span>
                  </div>
                </div>
              </td>
            </tr>

            <tr>
              <!-- <td colspan="4"></td> -->
            </tr>

            <tr>
              <td rowspan="3" style="text-align: center">特长情况</td>
              <!-- <td colspan="4" style="text-align: center; font-weight: bold">请选择以下1项特长参与资格审核（校测）</td> -->
            </tr>
            <tr>
              <td colspan="2" style="text-align: center">体育类</td>
              <td colspan="2" style="text-align: center">艺术类</td>
            </tr>
            <tr>
              <td colspan="2">
                <a-radio-group v-model:value="formData.subcategories" @change="changeForte()">
                  <a-radio value="田径">田径</a-radio>
                  <a-radio value="乒乓">乒乓</a-radio>
                  <a-radio value="羽毛球">羽毛球</a-radio>
                  <a-radio value="足球">足球</a-radio>
                  <a-radio value="篮球">篮球</a-radio>
                  <a-radio value="其他">
                    其他
                    <a-input v-model:value="formData.other" v-if="formData.subcategories === '其他'" @blur="myBlur()" />
                  </a-radio>
                </a-radio-group>
              </td>
              <td colspan="2">
                <a-radio-group v-model:value="formData.subcategories" @change="changeForte()">
                  <a-radio value="绘画">绘画</a-radio>
                  <a-radio value="书法">书法</a-radio>
                  <a-radio value="音乐">音乐（含声乐、器乐、舞蹈）</a-radio>
                </a-radio-group>
              </td>
            </tr>

            <tr>
              <td rowspan="7" style="text-align: center">特长佐证材料</td>
              <td colspan="7" style="text-align: center; font-weight: bold">
                （对应选择的1项特长填报相应佐证材料。证明材料可包括个人相关艺体类等级证书或初中阶段获得的奖状、比赛成绩证明等。填报个人最高级别奖项，上限5项）
              </td>
            </tr>

            <tr>
              <td style="text-align: center">成绩或证书获取时间</td>
              <td style="text-align: center">成绩或证书名称</td>
              <td style="text-align: center" colspan="2">成绩或证书名次或等级</td>
            </tr>
            <tr>
              <td>{{ formData.issuanceDate4 }}</td>
              <td>{{ formData.awardName4 }}</td>
              <td colspan="2">{{ formData.grade4 }}</td>
            </tr>

            <tr>
              <td>{{ formData.issuanceDate5 }}</td>
              <td>{{ formData.awardName5 }}</td>
              <td colspan="2">{{ formData.grade5 }}</td>
            </tr>
            <tr>
              <td>{{ formData.issuanceDate6 }}</td>
              <td>{{ formData.awardName6 }}</td>
              <td colspan="2">{{ formData.grade6 }}</td>
            </tr>

            <tr>
              <td>{{ formData.issuanceDate7 }}</td>
              <td>{{ formData.awardName7 }}</td>
              <td colspan="2">{{ formData.grade7 }}</td>
            </tr>

            <tr>
              <td>{{ formData.issuanceDate8 }}</td>
              <td>{{ formData.awardName8 }}</td>
              <td colspan="2">{{ formData.grade8 }}</td>
            </tr>

            <tr>
              <td rowspan="5" style="text-align: center">其他获奖及荣誉</td>
              <td colspan="5" style="text-align: center; font-weight: bold">
                （除以上特长佐证材料外，填报并上传初中阶段获得的其他奖项及荣誉，须有相关证书证明。填报个人最高级别奖项，上限3项）
              </td>
            </tr>

            <tr>
              <td style="text-align: center">获奖时间</td>
              <td style="text-align: center">奖项名称</td>
              <td colspan="2" style="text-align: center">成绩或证书等级</td>
            </tr>
            <tr>
              <td>{{ formData.issuanceDate }}</td>
              <td>{{ formData.awardName }}</td>
              <td colspan="2">{{ formData.grade }}</td>
            </tr>
            <tr>
              <td>{{ formData.issuanceDate2 }}</td>
              <td>{{ formData.awardName2 }}</td>
              <td colspan="2">{{ formData.grade2 }}</td>
            </tr>
            <tr>
              <td>{{ formData.issuanceDate3 }}</td>
              <td>{{ formData.awardName3 }}</td>
              <td colspan="2">{{ formData.grade3 }}</td>
            </tr>

            <!-- <tr>
                <td rowspan="2">自我介绍</td>
                <td colspan="4" class="self-intro-cell">
                  <textarea v-model="formData.remark" placeholder="(300字以内)" maxlength="300" rows="8"></textarea>
                  <div class="word-count">{{ formData.selfIntroduction.length }}/300</div>
                  {{ formData.remark }}
                </td>
              </tr> -->
            <tr>
              <!-- <td colspan="4"></td> -->
            </tr>
            <tr>
              <td rowspan="2">报考承诺</td>
              <td colspan="4" class="declaration-cell">
                <span>本人承诺，以上填报信息均属实。</span>
                <div class="signature-line">
                  <div>
                    <span>学生签字：</span>
                    <span class="signature-input">
                      <!-- <input v-model="formData.studentSignature" type="text" placeholder="请签名"> -->
                    </span>

                    <span style="margin-left: 100px">监护人签字：</span>
                    <span class="signature-input">
                      <!-- <input v-model="formData.guardianSignature" type="text" placeholder="请签名"> -->
                    </span>
                  </div>
                  <!-- <div>
                  <span>监护人签字：</span>
                  <span class="signature-input">
                    
                  </span>
                </div> -->
                </div>
                <div class="date-line">
                  <span>{{ formData.signatureYear }}</span> 年 <span>{{ formData.signatureMonth }}</span> 月
                  <span>{{ formData.signatureDay }}</span> 日
                </div>
              </td>
            </tr>
            <tr>
              <!-- <td colspan="4"></td> -->
            </tr>
            <tr>
              <td rowspan="2">学校审核</td>
              <td colspan="4" class="school-review-cell">
                <p>初中学校审核意见：</p>
                <div class="school-seal">
                  学校盖章
                  <div class="date-line school-date">
                    <span>{{ formData.schoolYear }}</span> 年 <span>{{ formData.schoolMonth }}</span> 月 <span>{{ formData.schoolDay }}</span> 日
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <!-- <td colspan="4"></td> -->
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="4" class="note-cell">
                <p>填报完成后，此表由学生本人及监护人签字确认，并由初中学校审核盖章，入围校测的学生于校测当日交至招生学校。</p>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div class="form-actions">
        <button class="btn btn-secondary" @click="downloadPdf">下载pdf去打印</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { fileApi } from '/@/api/support/file-api';
import { loginApi } from '/@/api/system/login-api';
import { Modal, message } from 'ant-design-vue';
import html2canvas from 'html2canvas';
import jspdf from 'jspdf';
import { FastBackwardFilled, PlusOutlined } from '@ant-design/icons-vue';
import { htmlToPDF } from '../../utils/html2pdf';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

const radioStyle = reactive({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
});
const baseUrl = import.meta.env.VITE_APP_API_URL;
const dialogVisible = ref(false);
const actionUrl = baseUrl + '/upPic?folder=1';
import { useUserStore } from '/@/store/modules/system/user.js';
const showPreview = ref(false); // 控制预览模态框的显示
const previewImageSrc = ref(''); // 存储点击图片的 URL

// 表单数据
const formData = reactive({
  picUrl: '',
  district: '',
  school: '',
  actualName: '',
  registerNum: '',
  gender: '',
  card: '',
  position: '',
  houseLocation: '',
  political: '',
  address: '',
  score: '',
  language: '',
  maths: '',
  english: '',
  other: '',
  guardianTitle: '',
  guardianName: '',
  phone: '',
  workplace: '',
  guardianTitle2: '',
  guardianName2: '',

  issuanceDate: '',
  grade: '',
  awardName: '',
  certificateUrl: '',

  issuanceDate2: '',
  grade2: '',
  awardName2: '',
  certificateUrl2: '',

  issuanceDate3: '',
  grade3: '',
  awardName3: '',
  certificateUrl3: '',

  issuanceDate4: '',
  grade4: '',
  awardName4: '',
  certificateUrl4: '',

  issuanceDate5: '',
  grade5: '',
  awardName5: '',
  certificateUrl5: '',

  issuanceDate6: '',
  grade6: '',
  awardName6: '',
  certificateUrl6: '',

  issuanceDate7: '',
  grade7: '',
  awardName7: '',
  certificateUrl7: '',

  issuanceDate8: '',
  grade8: '',
  awardName8: '',
  certificateUrl8: '',

  phone2: '',
  workplace2: '',
  remark: '',
  subcategories: null,
  signatureYear: new Date().getFullYear(),
  signatureMonth: new Date().getMonth() + 1,
  signatureDay: new Date().getDate(),
  schoolYear: new Date().getFullYear(),
  schoolMonth: new Date().getMonth() + 1,
  schoolDay: new Date().getDate(),
});

// 照片上传
const previewVisible = ref(false);
const photoUrl = ref('');
const fileUrl1 = ref([]);
const fileUrl2 = ref([]);
const fileUrl21 = ref([]);
const fileUrl22 = ref([]);
const fileUrl23 = ref([]);
const fileUrl24 = ref([]);
const fileUrl25 = ref([]);
const fileUrl26 = ref([]);
const fileUrl27 = ref([]);
const fileUrl28 = ref([]);
const loginName = ref(' ');
const employeeId = ref();
const formRef = ref(null);
const diaType = ref(false);

// 处理图片点击，预览图片
function previewImage(imageSrc) {
  previewImageSrc.value = imageSrc;
  showPreview.value = true;
}

// 关闭预览
function closePreview() {
  showPreview.value = false;
}

const disabledDate = (current) => {
  // 禁用今天之后的日期（包括今天）
  return current && current > dayjs().endOf('day');
};

const handlePhotoUpload1 = async (event) => {
  const file = event.target.files[0];
  const files = event.target.files;
  if (file) {
    const formData = new FormData();
    // for (let i = 0; i < files.length; i++) {
    //   formData.append('file', files[i]);
    // }
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);

      fileUrl1.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};

const handlePhotoUpload21 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl21.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload22 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl22.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload23 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl23.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload24 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl24.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload25 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl25.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload26 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl26.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload27 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl27.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload28 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl28.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};
const handlePhotoUpload2 = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);
      fileUrl2.value.push(baseUrl + '/upload/' + res.data.fileKey);
    }
  }
};

const handlePhotoUpload = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('folder', 1);
    let res = await fileApi.upPic(formData, 1);
    if (res.code == 0) {
      console.log(baseUrl + '/upload/' + res.data.fileKey);

      photoUrl.value = baseUrl + '/upload/' + res.data.fileKey;
    }
    // const reader = new FileReader();
    // reader.onload = (e) => {
    //   photoUrl.value = e.target.result;
    // };
    // reader.readAsDataURL(file);
  }
};
function removeIfExists(str, arr) {
  return arr.filter((item) => item !== str);
}
async function myBlur() {
  // if (subcategories.includes(formData.other)) {
  //   subcategories = removeIfExists(formData.other + '', subcategories);
  // } else {
  //   subcategories.push(formData.other);
  // }
  // let res = await loginApi.Talentupdate({ subcategories: `'${subcategories.join("','")}'` });
  console.log(formData.other);

  let res = await loginApi.Talentupdate({ subcategories: formData.other });
  if (res.code == 0) {
    // message.success('提交成功');
    // dialogVisible.value = true;
  }
}
let subcategories = [];
async function changeForte() {
  let res2 = await loginApi.Talentupdate({ subcategories: formData.subcategories });
  if (res2.code == 0) {
    // message.success('提交成功');
    // dialogVisible.value = true;
  }
  return;
  // if (subcategories.includes('其他'))

  if (subcategories.includes(val)) {
    subcategories = removeIfExists(val + '', subcategories);
  } else {
    subcategories.push(val);
  }
  let res = await loginApi.Talentupdate({ subcategories: `'${subcategories.join("','")}'` });
  if (res.code == 0) {
    // message.success('提交成功');
    // dialogVisible.value = true;
  }
}
const isOther = ref(false);
// function isOther(){
//   console.log(subcategories.length);
//   if (subcategories.includes('其他')) {
//     if (subcategories.length == 0) {
//       return true
//     }
//     return false
//   }else{
//     return true
//   }
// }
function comfirmInfo() {
  dialogVisible.value = true;
}

// 表单提交
const handleOk = async () => {
  // 表单验证
  if (!validateForm()) {
    return;
  }

  let arr = [];
  if (formData.guardianTitle) {
    arr.push({
      guardianTitle: formData.guardianTitle,
      guardianName: formData.guardianName,
      phone: formData.phone,
      workplace: formData.workplace,
    });
  }
  if (formData.guardianTitle2) {
    arr.push({
      guardianTitle: formData.guardianTitle2,
      guardianName: formData.guardianName2,
      phone: formData.phone2,
      workplace: formData.workplace2,
    });
  }

  let arr2 = [];
  try {
    if (formData.issuanceDate) {
      arr2.push({
        issuanceDate: formData.issuanceDate,
        grade: formData.grade,
        awardName: formData.awardName,
        certificateUrl: fileUrl21.value[0],
      });
    }
    if (formData.issuanceDate2) {
      arr2.push({
        issuanceDate: formData.issuanceDate2,
        grade: formData.grade2,
        awardName: formData.awardName2,
        certificateUrl: fileUrl22.value[0],
      });
    }
    if (formData.issuanceDate3) {
      arr2.push({
        issuanceDate: formData.issuanceDate3,
        grade: formData.grade3,
        awardName: formData.awardName3,
        certificateUrl: fileUrl23.value[0],
      });
    }
  } catch (error) {
    console.log('奖项字段拼接异常');
  }
  let arr3 = [];
  try {
    if (formData.issuanceDate4) {
      arr3.push({
        issuanceDate: formData.issuanceDate4,
        grade: formData.grade4,
        awardName: formData.awardName4,
        talentFileUrl: fileUrl24.value[0],
      });
    }
    if (formData.issuanceDate5) {
      arr3.push({
        issuanceDate: formData.issuanceDate5,
        grade: formData.grade5,
        awardName: formData.awardName5,
        talentFileUrl: fileUrl25.value[0],
      });
    }
    if (formData.issuanceDate6) {
      arr3.push({
        issuanceDate: formData.issuanceDate6,
        grade: formData.grade6,
        awardName: formData.awardName6,
        talentFileUrl: fileUrl26.value[0],
      });
    }
    if (formData.issuanceDate7) {
      arr3.push({
        issuanceDate: formData.issuanceDate7,
        grade: formData.grade7,
        awardName: formData.awardName7,
        talentFileUrl: fileUrl27.value[0],
      });
    }
    if (formData.issuanceDate8) {
      arr3.push({
        issuanceDate: formData.issuanceDate8,
        grade: formData.grade8,
        awardName: formData.awardName8,
        talentFileUrl: fileUrl28.value[0],
      });
    }
  } catch (error) {
    console.log('特长佐证材料字段拼接异常');
  }

  //分数拼接
  let soc = {
    language: formData.language,
    maths: formData.maths,
    english: formData.english,
  };
  const values = Object.values(soc);
  const sc = `"${values.join(',')}"`;

  let obj = {
    loginName: loginName.value,
    employeeId: employeeId.value,
    guardian: arr,
    actualName: formData.actualName,
    registerNum: formData.registerNum,
    gender: formData.gender,
    card: formData.card,
    position: formData.position,
    houseLocation: formData.houseLocation,
    political: formData.political,
    address: formData.address,
    picUrl: photoUrl.value,
    // talent_fileurl: fileUrl1.value,
    // fileUrl: fileUrl2.value,
    remark: formData.remark,
    score: sc,
    talent: [
      {
        subcategories: formData.other || formData.subcategories,
      },
    ],
    certificateEntities: arr2,
    talentfileEntities: arr3,
  };
  console.log(obj);

  Modal.confirm({
    title: '确认提交吗?(注意：提交完不能修改)',
    icon: '',
    content: '',
    okText: '是',
    okType: 'danger',
    cancelText: '否',
    onOk: async () => {
      localStorage.setItem('district', formData.district);
      localStorage.setItem('school', formData.school);
      let res = await loginApi.saveStuInfo(obj);
      if (res.code == 0) {
        message.success('提交成功');
        dialogVisible.value = true;
      }
    },
    onCancel() {
      console.log('Cancel');
    },
  });
};

// 表单验证
const validateForm = () => {
  //district
  if (!formData.district) {
    alert('请填写区信息');
    return false;
  }
  if (!formData.school) {
    alert('请填写学校信息');
    return false;
  }
  if (!formData.actualName) {
    alert('请填写学生姓名');
    return false;
  }
  if (!formData.registerNum) {
    alert('请填写中考报名号');
    return false;
  }
  // if (formData.registerNum.length !=12) {
  //   alert('中考报名号');
  //   return false;
  // }
  if (!formData.gender) {
    alert('请选择性别');
    return false;
  }
  if (!photoUrl.value) {
    alert('请上传照片');
    return false;
  }
  if (!formData.card) {
    alert('请填写身份证号');
    return false;
  }
  let reg = /^\d{17}[\dXx]$/;
  if (!reg.test(formData.card)) {
    alert('请输入正确的身份证号');
    return false;
  }
  if (!formData.houseLocation) {
    alert('请填写户籍地址');
    return false;
  }
  if (!formData.political) {
    alert('请填写政治面貌');
    return false;
  }
  if (!formData.address) {
    alert('请填写居住地址');
    return false;
  }
  if (!formData.guardianName) {
    alert('请填写监护人姓名');
    return false;
  }
  if (!formData.phone) {
    alert('请填写监护人联系电话');
    return false;
  }
  if (!formData.language) {
    alert('请填写语文成绩');
    return false;
  }
  if (!formData.maths) {
    alert('请填写数学成绩');
    return false;
  }
  if (!formData.english) {
    alert('请填写英语成绩');
    return false;
  }
  if (!formData.issuanceDate4) {
    alert('请填写成绩或证书获取时间');
    return false;
  }
  if (!formData.grade4) {
    alert('请填写成绩或证书名称');
    return false;
  }
  if (!formData.awardName4) {
    alert('请填写成绩或证书名次或等级');
    return false;
  }
  return true;
};

// 重置表单
const resetForm = () => {
  if (confirm('确定要重置表单吗？所有已填写的信息将被清空。')) {
    Object.keys(formData).forEach((key) => {
      if (!['signatureYear', 'signatureMonth', 'signatureDay', 'schoolYear', 'schoolMonth', 'schoolDay'].includes(key)) {
        formData[key] = '';
      }
    });
    photoUrl.value = '';
  }
};
// 查询登录信息
async function getLoginInfo() {
  try {
    //获取登录用户信息
    const res = await loginApi.getLoginInfo();
    let data = res.data;
    formData.card = data.card;
    formData.actualName = data.actualName;
    formData.gender = data.gender;
    loginName.value = data.loginName;
    employeeId.value = data.employeeId;
  } catch (e) {
    smartSentry.captureError(e);
  }
  getStuInfoway();
}
const stuInfo = ref({
  score: ['', '', ''],
  talent: [{ subcategories: '' }],
});
async function getStuInfoway() {
  let obj = {
    employeeId: employeeId.value,
  };
  let res = await loginApi.getStuInfo(obj);
  if (res.code == 0) {
    stuInfo.value = res.data;
    formData.actualName = res.data.actualName;
    formData.registerNum = res.data.registerNum;
    formData.gender = res.data.gender;
    formData.card = res.data.card;
    formData.position = res.data.position;
    formData.houseLocation = res.data.houseLocation;
    formData.political = res.data.political;
    formData.address = res.data.address;
    photoUrl.value = res.data.picUrl;

    if (res.data.juniorHighSchool) {
      formData.district = res.data.juniorHighSchool.split(',')[0];
      formData.school = res.data.juniorHighSchool.split(',')[1];
    }
    for (let i = 0; i < res.data.guardian.length; i++) {
      if (i == 0) {
        formData.guardianTitle = res.data.guardian[0].guardianTitle;
        formData.guardianName = res.data.guardian[0].guardianName;
        formData.phone = res.data.guardian[0].phone;
        formData.workplace = res.data.guardian[0].workplace;
      } else if (i == 1) {
        formData.guardianTitle2 = res.data.guardian[1].guardianTitle;
        formData.guardianName2 = res.data.guardian[1].guardianName;
        formData.phone2 = res.data.guardian[1].phone;
        formData.workplace2 = res.data.guardian[1].workplace;
      }
    }
    let score = res.data.score;
    if (score) {
      formData.language = score.split(',')[0];
      formData.maths = score.split(',')[1];
      formData.english = score.split(',')[2];
    }
    if (res.data.talent) {
      formData.subcategories = res.data.talent[0].subcategories;
    }
    formData.remark = res.data.remark;

    let zlist = res.data.talentfileEntities;
    if (zlist) {
      formData.issuanceDate4 = zlist[0].issuanceDate;
      formData.grade4 = zlist[0].grade;
      formData.awardName4 = zlist[0].awardName;
      fileUrl24.value.push(zlist[0].talentFileUrl);

      if (zlist.length - 1 >= 1) {
        formData.issuanceDate5 = zlist[1].issuanceDate;
        formData.grade5 = zlist[1].grade;
        formData.awardName5 = zlist[1].awardName;
        fileUrl25.value.push(zlist[1].talentFileUrl);
      }
      if (zlist.length - 1 >= 2) {
        formData.issuanceDate6 = zlist[2].issuanceDate;
        formData.grade6 = zlist[2].grade;
        formData.awardName6 = zlist[2].awardName;
        fileUrl26.value.push(zlist[2].talentFileUrl);
      }
      if (zlist.length - 1 >= 3) {
        formData.issuanceDate7 = zlist[3].issuanceDate;
        formData.grade7 = zlist[3].grade;
        formData.awardName7 = zlist[3].awardName;
        fileUrl27.value.push(zlist[3].talentFileUrl);
      }
      if (zlist.length - 1 >= 4) {
        formData.issuanceDate8 = zlist[4].issuanceDate;
        formData.grade8 = zlist[4].grade;
        formData.awardName8 = zlist[4].awardName;
        fileUrl28.value.push(zlist[4].talentFileUrl);
      }
    }

    let clist = res.data.certificateEntities;
    if (clist) {
       if (clist.length - 1 >= 0) {
      formData.issuanceDate = clist[0].issuanceDate;
      formData.grade = clist[0].grade;
      formData.awardName = clist[0].awardName;
      fileUrl21.value.push(clist[0].certificateUrl);
    }

    if (clist.length - 1 >= 1) {
      formData.issuanceDate2 = clist[1].issuanceDate;
      formData.grade2 = clist[1].grade;
      formData.awardName2 = clist[1].awardName;
      fileUrl22.value.push(clist[1].certificateUrl);
    }
    if (clist.length - 1 >= 2) {
      formData.issuanceDate3 = clist[2].issuanceDate;
      formData.grade3 = clist[2].grade;
      formData.awardName3 = clist[2].awardName;
      fileUrl23.value.push(clist[2].certificateUrl);
    }
    }
  }
}
const formRefpdf2 = ref();
async function downloadPdf() {
  diaType.value = true;

  setTimeout(function () {
    htmlToPDF('formRefpdf2', formData.actualName);
    diaType.value = false;
  }, 300);
}
// 自动填充当前日期
onMounted(() => {
  formData.district = localStorage.getItem('district');
  formData.school = localStorage.getItem('school');
  getLoginInfo();
  const today = new Date();
  formData.signatureYear = today.getFullYear();
  formData.signatureMonth = today.getMonth() + 1;
  formData.signatureDay = today.getDate();
  formData.schoolYear = today.getFullYear();
  formData.schoolMonth = today.getMonth() + 1;
  formData.schoolDay = today.getDate();
});
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.photo-preview-container {
  margin: 10px;
  display: inline-block;
}

.photo-preview {
  cursor: pointer;
  border-radius: 5px;
  transition: transform 0.2s ease;
}

.photo-preview:hover {
  transform: scale(1.05);
}

.photo-input {
  margin-top: 10px;
}

.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.preview-modal-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

body {
  font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.5;
}

.checkboxs {
  height: 20px;
  width: 20px;
  margin-right: 6px;
}

.app-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
}

.form-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.form-header {
  text-align: center;
  margin-bottom: 20px;
}

.form-header h1 {
  font-size: 18px;
  margin-bottom: 10px;
}

.form-header h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.school-info {
  font-size: 16px;
  margin-bottom: 20px;
}

.underline {
  display: inline-block;
  min-width: 100px;
  border-bottom: 1px solid #000;
  text-align: center;
  padding: 0 5px;
}

.registration-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.registration-table td {
  border: 1px solid #000;
  padding: 8px;
  vertical-align: middle;
  height: 40px;
}

input,
select,
textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}

textarea {
  resize: none;
  height: 120px;
}

.photo-cell {
  text-align: center;
  vertical-align: middle;
}

.photo-container {
  position: relative;
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ccc;
}

.photo-container2 {
  position: relative;
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ccc;
}

.photo-placeholder {
  position: absolute;
  text-align: center;
  width: 140px;
  margin-left: 100px;
  font-size: 14px;
  color: #999;
  line-height: 1.5;
}

.photo-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  height: 150px;
}

.photo-input {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.self-intro-cell {
  position: relative;
}

.word-count {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 12px;
  color: #999;
}

.declaration-cell,
.school-review-cell,
.note-cell {
  padding: 15px;
}

.signature-line {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.signature-input {
  display: inline-block;
  width: 100px;
  border-bottom: 1px solid #000;
}

.date-line {
  text-align: right;
  margin-top: 10px;
}

.school-seal {
  text-align: right;
  margin-top: 50px;
}

.school-date {
  margin-top: 5px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #1890ff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #40a9ff;
}

.btn-secondary {
  background-color: #52c41a;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #73d13d;
}

.btn-danger {
  background-color: #ff4d4f;
  color: #fff;
}

.btn-danger:hover {
  background-color: #ff7875;
}

@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }

  .form-container {
    padding: 15px;
  }

  .signature-line {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}
</style>
